<template>
  <div>
    <van-nav-bar :title="t('home.putShelves')" left-arrow @click-left="onClickLeft" placeholder fixed/>

    <van-cell-group style="background: none">
      <scanning v-if="false" @keydownEnter="handleScan" style="margin-bottom: 20px; height: 50px;" :placeholder="t('putShelves.pleaseScanning')" :isFocus="true" :isReset="true"></scanning>
      <scanning ref="containerCodeRef" @keydownEnter="handleScanContainer" style="margin-bottom: 20px; height: 50px;" :placeholder="t('putShelves.pleaseScanningContainer')" :isFocus="true"></scanning>
      <scanning ref="locationCodeRef" @keydownEnter="handleScanLocation" style="margin-bottom: 20px; height: 50px;" :placeholder="t('putShelves.pleaseScanningLocation')" :isReset="true"></scanning>

      <van-cell v-if="false" :title="t('putShelves.warehouseLocation')" :value="form.locationCode" class="mt-2">
        <template v-if="locationMsg" #right-icon>
          <div style="color: red; font-size: 1rem">{{ locationMsg }}</div>
        </template>
      </van-cell>

      <div v-if="false">
        <van-cell v-if="form.locationCode" :title="t('putShelves.circulationBoxNumber')" class="mt-2"/>
        <van-cell v-if="form.containerCode" center :title="form.containerCode">
          <template #right-icon>
            <van-icon v-if="putShelvesSuccess" name="passed" size="2rem" color="#52C41A"/>
            <van-icon v-else name="warning-o" size="2rem" color="red"/>
          </template>
          <template #label>
            <div style="color:red; font-size: 1rem">{{ putShelvesMsg }}</div>
          </template>
        </van-cell>
      </div>
      <van-field>
        <template #input>
          <van-col span="12" style="text-align: center">
            {{t('putShelves.recommendLocation')}}
          </van-col>
          <van-col span="12" style="text-align: center">
            {{t('putShelves.type')}}
          </van-col>
        </template>
      </van-field>
      <div style="">
        <van-field v-for="(item, index) in LocationList" :key="index">
          <template #input>
            <van-col span="12" style="text-align: center">
              {{ item.locationCode }}
            </van-col>
            <van-col span="12" style="text-align: center">
              {{ item.locationTypeCodeAndName }}
            </van-col>
          </template>
        </van-field>
      </div>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import Scanning from "@/views/components/Scanning/index.vue"
import { showSuccessToast } from "vant";
import { postRequest, scanSuccess, scanFail } from "@/api";

const { t } = useI18n();
const form = ref({
  locationCode: undefined,
  containerCode: undefined,
});
const putShelvesSuccess = ref(false)
const locationMsg = ref(undefined)
const putShelvesMsg = ref(undefined)
const containerCodeRef = ref(null)
const locationCodeRef = ref(null)
interface LocationForm {
  locationCode: string,
  locationTypeCodeAndName: string,
}
let LocationList: LocationForm[] = reactive([])
// let LocationList = reactive<LocationForm[]>([])
const onClickLeft = () => history.back();
const handleScan = async code => {
  if ([undefined, null, ''].includes(form.value.locationCode)) {
    await postRequest(
        '/orderInfo/checkLocationExist',
        { locationCode: code }
    ).then(() => {
      scanSuccess()
      form.value.locationCode = code
      locationMsg.value = undefined
    }, reason => {
      scanFail()
      locationMsg.value = String(reason)
          .replace('Error: ', '')
    })
  } else {
    const { locationCode } = form.value
    putShelvesMsg.value = undefined
    form.value.containerCode = undefined
    await postRequest(
        '/orderInfo/updateOrderInfoForShelving',
        { locationCode, containerCode: code, fromTerminal: 1 }
    ).then(() => {
      scanSuccess()
      putShelvesSuccess.value = true
      form.value.containerCode = code
      setTimeout(() => {
        form.value.containerCode = undefined
        putShelvesSuccess.value = false
      }, 1500)
      showSuccessToast(t('success'))
    }, reason => {
      scanFail()
      putShelvesSuccess.value = false
      form.value.containerCode = code
      putShelvesMsg.value = String(reason)
          .replace('Error: ', '')
    })
  }
}
const handleScanContainer = code => {
  postRequest(
    '/container/getContainerByContainerCode',
    { containerCode: code, isShowNearbyStorageLocation: true }
  ).then(res => {
    let d = res.data.locations || []
    LocationList.push(...d)
    console.log(LocationList);
    scanSuccess()
    containerCodeRef.value.setValue(code)
    locationCodeRef.value.setFocus()
    form.value.containerCode = code
  }, () => {
    scanFail()
    containerCodeRef.value.setValue(undefined)
  })
}
const handleScanLocation = code => {
  postRequest(
    '/orderInfo/updateOrderInfoForShelving',
    { containerCode: form.value.containerCode, locationCode: code, fromTerminal: 1 }
  ).then(() => {
    scanSuccess()
    form.value.locationCode = code
    setTimeout(() => {
      containerCodeRef.value.setValue(undefined)
      locationCodeRef.value.setValue(undefined)
      containerCodeRef.value.setFocus()
      LocationList.length = 0
    }, 1000)
    showSuccessToast(t('success'))
  }, () => {
    scanFail()
  })
}
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-cell__label) {
  font-size: 1rem;
}
</style>